<template>
  <div class="c-export">
    <!-- 页面元素 -->
    <pk-dialog :title="title" style="width:600px;" :footer="false" @onClose="onClose">
      <div class="flex-row mt-24 mb-24">
        <div class="c-export-file flex-1 mr-8">
          <el-upload
            :action="action"
            :show-file-list="false"
            accept=""
            name="file"
            :headers="headers"
            :data="data"
            :on-progress="onPropress"
            :on-success="onSuccess"
            :on-error="onError"
          >
              <template #trigger>
                <div class="flex-column align-items-center justify-center w-400 c-export-filecontent">
                    <el-icon class="el-icon--upload mb-8" size="34px"><UploadFilled /></el-icon> 
                    <div class="el-upload__text f-12">
                      {{tip}}
                    </div>
                  </div>
              </template> 
          </el-upload>
        </div>
        <div class="c-export-template flex-column align-items-center justify-center">
          <div class="c-export-templateicon"></div>
          <div class="f-12">
            <slot name="template"></slot>
            <!-- <a href="/filetemplate.csv" download="filetemplate.csv"> 下载模板</a> -->
          </div>
        </div>
      </div>
      <!-- <div class="f-12">单个文件不能超过1MB</div> -->
      <div class="c-export-progress mt-12">
        <el-progress :percentage="percentage" :color="customColorMethod" v-if="percentage > 0"></el-progress>
      </div>
      <div class="f-12 flex-row justify-center mt-8">{{ msg }}</div>
    </pk-dialog>
  </div>
</template>

<script setup>
// 这里是逻辑代码
import { ref, onMounted, reactive, defineEmits, defineProps } from 'vue';
import pkDialog from '@/components/pkui/pk-dialog/pk-dialog.vue';
import { UploadFilled } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
const emits = defineEmits(['onClose', 'cancel', 'confirm'])
import { getToken, setKeyItem, getKeyUserInfo} from '@/utils/auth'
defineProps({
  action: {
    type: String,
    default: '/scoreapi/adm/task/importUser'
  },
  title: {
    type:String,
    default: '导入候选人名单'
  },
  tip: {
    type: String,
    default: '上传文件'
  }
})
const route = useRoute()
const timter = ref(null)
const proValue = ref(100)
// 定义响应式数据
const percentage = ref(0);
const msg = ref('')
const isTure = ref(false)
const customColorMethod = (percentage) => {
  if (percentage < 30) {
    return '#909399'
  }
  if (percentage < 70) {
    return '#e6a23c'
  }
  return '#67c23a'
}

const headers = { 
  authorization: getToken(),
}

const data = reactive({})

const onClose = () => {
  emits('onClose', isTure.value)
}

const onPropress = (event) => {
  timter.value = setInterval(() => {
    percentage.value += 1;
    if (percentage.value >= 100) {
      clearInterval(timter.value);
    }
  }, 1000);
}

const onError = () => { 
  clearInterval(timter.value);
}

const onSuccess = (e) => {
  isTure.value = true
  percentage.value = 100
  clearInterval(timter.value);
  msg.value = e.msg
  emits('confirm', e)
}

const fileTemplate = () => {
  window.open(window.location.origin + '/1733930753333意见反馈.xls', '_blank')
}

// 生命周期钩子
onMounted(() => {});
</script>

<style lang="scss" scoped>
 .c-export {
    position: absolute;
    &-file{
      border: #ddd 1px dashed;
      border-radius: 12px;
      display: flex;
      justify-content: center;
    }
    &-filecontent{
      height: 160px;
    }
    &-template {
      border: #ddd 1px dashed;
      width: 150px;
      padding: 12px;
      border-radius: 12px;
      height: 138px;
    }
    &-templateicon {
      width: 80px; 
      height: 80px;
      background: url("@/assets/icon/execlicon.svg") center center no-repeat;
      background-size: 60px auto ;
    }
 }
</style>
